<template>
	<van-nav-bar title="检测报告" left-text="返回" left-arrow @click-left="onClickLeft" />
	<div class="wrap">
		<van-collapse v-model="activeNames">
			<van-collapse-item name="1">
				<template #title>
					<div class="title-wrap">
						<div style="min-width:200px">【报告编号】 {{ info?.orderno }}</div>
					</div>
				</template>
				<div class="content" v-for="(item, index) in info?.sampleitems" :key="index">
					<van-cell title="样品编号" :value="item.sampleid" />
					<van-cell title="委托单单位" :value="item.custname" />
					<van-cell title="样品名称" :value="item.testsample" />
					<van-cell title="报告日期" :value="item.taudittime" />
					<div class="content-action">
						<van-button plain hairline type="success" size="small" @click="check(item)">查看检测项</van-button>
					</div>
				</div>
				<div style="margin-top:12px">
					<van-button plain hairline type="primary" size="small"
						@click="loadpdf(info?.filepk, info?.filename)">报告单下载</van-button>
					<van-button plain hairline type="warning" size="small" @click="openpdf(info?.filepk, info?.filename)"
						style="margin-left: 24px;">在线预览</van-button>
				</div>
			</van-collapse-item>
		</van-collapse>
		<van-popup v-model:show="show" :style="{ padding: '12px', width: 'calc(100% - 48px)' }">
			<div class="popup-content">
				<ul class="header">
					<li class="column-large">检测项目</li>
					<!--<li>标准值</li>-->
					<li>单位</li>
					<li class="column-large">结果</li>
				</ul>
				<van-list>
					<ul v-for="(item) in checkres" :key="item.id">
						<li class="column-large">
							{{ item?.vcheckitemname }}
						</li>
						<!--<li>{{ item?.num }}</li>-->
						<li>{{ item?.measdocname }}</li>
						<li class="column-large">{{ item?.chkresult }}</li>
					</ul>
				</van-list>
			</div>
		</van-popup>
	</div>
</template>

<script setup>
import {
	ref
} from 'vue'
import {
	useRoute,
	useRouter
} from 'vue-router'
import { showConfirmDialog, showToast, showLoadingToast, closeToast } from 'vant'

import service from "@/api";
const activeNames = ref(['1']);

import axios from 'axios';
const route = useRoute()
const router = useRouter()
const show = ref(false)

const info = ref(null)

const checkres = ref(null)
const orderno = route?.query?.orderno || '';
const openId = route?.query?.openId || '';

const onLoad = async () => {
	showLoadingToast({
		duration: 0,
		forbidClick: true,
		message: '查询中',
	});
	try {
		const res = service
			.queryOrders({
				itype: "saleorder_query", //订单查询
				info: {
					orderNo: orderno,
					openId: openId,
				},
			})
			.then((res) => {
				console.log(res);
				closeToast()
				if (res.status == "success") {
					info.value = res.data && res.data[0];
					console.log(info.value);

				} else {
					closeToast()
					showToast(res.message);
				}
			});
	} catch (error) {
		console.error('查询请求失败：', error)
	}
};
onLoad()


const onClickLeft = () => {
	router.back()
}

const openFile = () => {
	let url = 'https://view.officeapps.live.com/op/view.aspx'
	window.open(url) // window.location.href=url
}


const loadpdf = async (filepk, filename) => {
	if (!filename) {
		showToast('还未生成pdf报告');
	} else {

		// 1. PDF文件URL（可以是后端API或静态文件路径）
		const pdfUrl = 'http://api.accrlab.com/qdxt/sendnc/dobusinessget?filepk=' + filepk;
		//alert (pdfUrl);
		// 2. 创建隐藏的<a>标签触发下载
		const link = document.createElement('a');
		link.href = pdfUrl;
		link.target = '_blank';
		//link.download = '检验报告.pdf'; // 设置下载文件名
		document.body.appendChild(link);
		link.click();
		document.body.removeChild(link);

	}
}


const openpdf = async (filepk, filename) => {
	if (!filename) {
		showToast('还未生成pdf报告');
	} else {
		try {
			// alert(111)
			// 1. PDF文件URL（可以是后端API或静态文件路径）
			const pdfUrl = 'http://api.accrlab.com/qdxt/sendnc/dobusinessget?filepk=' + filepk;

			router.push({
				path:'/view',
				query:{
					url:pdfUrl
				}
			})
			//   window.location.href = pdfUrl;
			// const response = await axios.get(pdfUrl, {
			// 	responseType: 'arraybuffer',
			// 	headers: {
			// 		'Content-Disposition': 'inline;filename=example.pdf'
			// 	}
			// })

			//alert(response.data)

			// const blob = new Blob([response.data], { type: 'application/pdf' })
			// const url = window.URL.createObjectURL(blob)
			//alert(url);
			// window.open(url)
			// window.open(url, '_blank');
			//window.location.href = url;
		} catch (error) {
			console.error('预览PDF失败', error)
		}

	}
}

const check = (item) => {
	console.log(item);
	checkres.value = item?.jyitems
	show.value = true
}

const toSign = () => {
	router.push({
		path: "/sign"
	});
}
</script>

<style>
.content .van-cell {
	padding-right: 24px !important;
}

.content .van-cell__title {
	flex: 0 0 20% !important;
}
</style>
<style scoped>
#app {
	padding: 0 !important;
}

body {
	display: block !important;
}

.wrap {
	padding: 0;
	width: 100vw;
	height: 100vh;
	;
}

.title-wrap {
	width: 120px;
	text-align: left;
}

.content-action {
	display: flex;
	padding: 0 24px;
	flex-direction: row-reverse;
}

.van-collapse-item__content {
	padding: 0;
}

.popup-content {
	max-width: 750px;
	min-height: 100px;
}

.popup-content .header {
	background: #5b87ff;
	color: white;
	border: none;
	position: sticky;
	top: 0;
	z-index: 1;
}

ul {
	padding: 10px;
	border-bottom: 1px solid #cacaca;
	display: flex;
	justify-content: space-between;
	flex-wrap: nowrap;
}

ul li {
	width: 100px;
	font-weight: 500;
	display: inline-block;
}

.column-large {
	width: 160px;
}
</style>